<template>
  <view class="custom-tab-bar">
    <view
      v-for="(item, index) in tabList"
      :key="index"
      :class="{ 'active': currentTab === index }"
      @click="switchTab(index)"
    >
      <image  style="width: 30rpx;height: 30rpx;"   :src="currentTab === index ? item.selectedIconPath : item.iconPath"></image>
      <text>{{ item.text }}</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    currentTab: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      tabList: [
        {
          pagePath: "packagesJiFen/JiFenShouYe/JiFenShouYe",
          text: "商城",
          iconPath: "/static/首页.png",
          selectedIconPath: "/static/首页@2x.png"
        },
        {
          pagePath: "packagesJiFen/JiFenMy/JiFenMy",
          text: "我的",
          iconPath: "/static/我的-我的.png",
          selectedIconPath: "/static/我的-我的@2x.png"
        }
      ]
    };
  },
  methods: {
    switchTab(index) {
      this.$emit('tabChange', index);
      uni.navigateTo({
        url: '/' + this.tabList[index].pagePath
      });
    }
  }
};
</script>

<style scoped>
.custom-tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 50px;
/*  background-color: #ffffff; */
  border-top: 1px solid #e5e5e5;
}

.custom-tab-bar view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.custom-tab-bar view.active text {

}
</style>